<template>
  <div id="menulist" class="template-page">
    <div class="tools">
      <el-button type="primary" @click="addMenu">新建一级菜单</el-button>
    </div>
    <el-dialog title="菜单信息" v-model="showDialog" :close-on-click-modal="false" draggable width="500px">
      <!-- 一级菜单表单 -->
      <el-form ref="formRef" :model="menu" :rules="menuRule" label-width="90px" class="form-input-m" :inline-message="true">
        <el-form-item prop="title" label="菜单名称">
          <el-input type="text" v-model="menu.title" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item prop="isWeb" label="Web菜单">
          <el-switch v-model="menu.isWeb" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item prop="url" label="Web路径" v-if="menu.isWeb===1">
          <el-input type="text" v-model="menu.url" placeholder="请输入路径"></el-input>
        </el-form-item>
        <el-form-item prop="icon" label="Web图标" v-if="menu.isWeb===1">
          <el-input type="text" v-model="menu.icon" placeholder="请输入图标" :prefix-icon="menu.icon" readonly><template #append><el-button icon="Search"
                @click="showDialogIco=true" /></template></el-input>
        </el-form-item>
        <el-form-item prop="type" label="Web类型" v-if="menu.isWeb===1">
          <el-radio-group v-model="menu.type">
            <el-radio :label="0">内部链接</el-radio>
            <el-radio :label="2">外部链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="url" label="小程序菜单">
          <el-switch v-model="menu.isMini" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item prop="url" label="小程序路径" v-if="menu.isMini===1">
          <el-input type="text" v-model="menu.miniUrl" placeholder="请输入路径"></el-input>
        </el-form-item>
        <el-form-item prop="icon" label="小程序图标" v-if="menu.isMini===1">
          <el-input type="text" v-model="menu.miniIcon" placeholder="请输入图标"></el-input>
        </el-form-item>
        <el-form-item prop="order" label="排序">
          <el-input type="text" v-model="menu.order" placeholder="请输入排序"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="saveMenuForm(formRef)">保存</el-button>
        <el-button @click="closeDialog(formRef)">取消</el-button>
      </template>
    </el-dialog>
    <el-dialog title="选择图标" v-model="showDialogIco" :close-on-click-modal="false" draggable width="600px">
      <template v-for="ico in iconList" :key="ico">
        <el-icon size="20" class="icon" @click="selectIcon(ico)">
          <component :is="ico"></component>
        </el-icon>
      </template>
    </el-dialog>
    <el-table v-loading="loading" row-key="id" default-expand-all :data="menuList" style="width: 100%" :height="conHeight" :tree-props="{children: 'children'}">
      <el-table-column prop="title" label="标题" width="250">
        <template #default="scope">
          <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">{{ scope.row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="100" align="center">
        <template #default="scope">
          {{formartType(scope.row.type)}}
        </template>
      </el-table-column>
      <el-table-column prop="isWeb" label="Web菜单" width="90" align="center">
        <template #default="scope">
          {{scope.row.isWeb===1?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column prop="url" label="路径"></el-table-column>
      <!-- <el-table-column prop="icon" label="图标" width="100"></el-table-column> -->
      <el-table-column prop="isMini" label="小程序菜单" width="100" align="center">
        <template #default="scope">
          {{scope.row.isMini===1?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column prop="miniUrl" label="路径"></el-table-column>
      <el-table-column prop="order" label="排序" width="80" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" icon="EditPen" plain circle @click="handleEdit(scope.row)"></el-button>
          <el-button size="small" type="danger" icon="Delete" plain circle @click="handleDelete(scope.row.id)"></el-button>
          <el-button size="small" type="primary" icon="Plus" plain circle @click="handleAddMenu(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { notifyType, notifyMessage } from '../../utils/common';
import type { FormInstance } from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
let { proxy }: any = getCurrentInstance();
let conHeight = ref(
  (document.documentElement.clientHeight || document.body.clientHeight) - 100 + 'px'
);
let loading = ref(false);
let menuList: any = reactive([]);
let iconList: any = reactive([]);
let showDialog = ref(false);
let showDialogIco = ref(false);
const formRef = ref<FormInstance>();
let menu = reactive({
  id: '',
  parentId: null,
  title: '',
  isWeb: 1,
  url: '',
  icon: '',
  type: 0,
  isMini: 0,
  miniUrl: '',
  miniIcon: '',
  order: null
});
const menuRule = {
  title: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    }
  ]
};

onMounted(() => {
  for (const [key] of Object.entries(ElementPlusIconsVue)) {
    iconList.push(key);
  }
  findMenuList();
});
function findMenuList() {
  menuList.length = 0;
  loading.value = true;
  const url = '/api/sys/menuList';
  proxy.$http
    .get(url)
    .then((res: any) => {
      //关闭加载
      loading.value = false;
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
      } else {
        menuList.push(...res.data.menuList);
      }
    })
    .catch((err: string) => {
      loading.value = false;
      notifyMessage(err, notifyType.warning, proxy);
    });
}

function formartType(type: any) {
  switch (type) {
    case 0:
      return '内部链接';
    case 2:
      return '外部链接';
    default:
      return '';
  }
}

// 添加一级菜单弹框
function addMenu() {
  menu.parentId = null;
  showDialog.value = true;
}
// 添加子级菜单
function handleAddMenu(row: any) {
  menu.parentId = row.id;
  showDialog.value = true;
}
// 编辑菜单
function handleEdit(row: any) {
  menu.parentId = row.parentId;
  menu.title = row.title;
  menu.isWeb = row.isWeb;
  menu.url = row.url;
  menu.icon = row.icon;
  menu.id = row.id;
  menu.type = row.type;
  menu.isMini = row.isMini;
  menu.miniUrl = row.miniUrl;
  menu.miniIcon = row.miniIcon;
  menu.order = row.order;
  showDialog.value = true;
}

function selectIcon(ico: any) {
  showDialogIco.value = false;
  menu.icon = ico;
}

//保存
function saveMenuForm(formEl: any) {
  if (!formEl) return;
  formEl.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    const postData = {
      id: menu.id,
      parentId: menu.parentId,
      title: menu.title,
      isWeb: menu.isWeb,
      url: menu.url,
      icon: menu.icon,
      type: menu.type,
      isMini: menu.isMini,
      miniUrl: menu.miniUrl,
      miniIcon: menu.miniIcon,
      order: menu.order
    };

    //判断添加和编辑
    let url = '';
    if (menu.id) {
      url = '/api/sys/editMenu';
    } else {
      url = '/api/sys/addMenu';
    }
    proxy.$http
      .post(url, postData)
      .then((res: any) => {
        if (res.status.code === 1) {
          notifyMessage('保存成功', notifyType.success, proxy);
          showDialog.value = false;
          menu.id = '';
          menu.parentId = null;
          menu.title = '';
          menu.isWeb = 1;
          menu.url = '';
          menu.icon = '';
          menu.type = 0;
          menu.isMini = 0;
          menu.miniUrl = '';
          menu.miniIcon = '';
          menu.order = null;
          findMenuList();
        } else {
          notifyMessage(res.status.msg, notifyType.warning, proxy);
        }
      })
      .catch((err: string) => {
        notifyMessage(err, notifyType.warning, proxy);
      });
    return true;
  });
}
// 取消添加
function closeDialog(formEl: any) {
  if (!formEl) return;
  formEl.clearValidate();
  menu.id = '';
  menu.parentId = null;
  menu.title = '';
  menu.isWeb = 1;
  menu.url = '';
  menu.icon = '';
  menu.type = 0;
  menu.isMini = 0;
  menu.miniUrl = '';
  menu.miniIcon = '';
  menu.order = null;
  showDialog.value = false;
}
// 删除
function handleDelete(id: string) {
  proxy
    .$confirm('确定删除此菜单?', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      const url = '/api/sys/deleteMenu';
      proxy.$http
        .post(url, { id })
        .then((res: any) => {
          if (res.status.code === 1) {
            notifyMessage('删除成功', notifyType.success, proxy);
            findMenuList();
          } else {
            notifyMessage(res.status.msg, notifyType.warning, proxy);
          }
        })
        .catch((err: string) => {
          notifyMessage(err, notifyType.warning, proxy);
        });
    })
    .catch((err: string) => {
      console.log(err);
    });
}
</script>
<style lang="scss">
#menulist {
  .icon {
    margin: 5px;
    cursor: pointer;
  }
}
</style>
